import React, { useState } from 'react';
import { pxConversionMm, mmConversionPx } from "@/utils/transpxmm";
import styles from './index.less';
import IconFont from '../IconFont';
import { Divider, InputNumber, Tooltip, Select } from 'antd';
import { RetweetOutlined } from '@ant-design/icons';


function ChooseSize({ value, onChange }) {
    const [checked, setchecked] = useState();
    value = value ?? {};

    return (
        <div>
            <p style={{ fontSize: 14, color: "#999", display: "flex" }}>
                <span style={{ marginRight: 12 }}>
                    常规尺寸
                </span>
            </p>
            <div className={`${styles.icons} center column`} style={{ justifyContent: "space-between" }}>
                <div
                    className={checked == "cpu" ? styles.active : 'row'}
                    onClick={() => {
                        if (checked == "cpu") {
                            setchecked("");
                            onChange({});
                        } else {
                            setchecked("cpu");
                            onChange({
                                type: "cpu",
                                width: 1920,
                                height: 1080,
                                unit: "px"
                            });
                        }
                    }}>
                    <div style={{ width: 36 }} className='center'>
                        <IconFont type='icon-cpu' style={{ fontSize: 34, color: "#fff" }} />
                    </div>
                    <p style={{ marginRight: 12 }}>电脑尺寸</p>
                    <span style={{ flex: 1, textAlign: "right" }}>1920*1080像素</span>
                </div>

                <div className={checked == "phone" ? styles.active : 'row'} onClick={() => {
                    if (checked == "phone") {
                        setchecked("");
                        onChange({});
                    } else {
                        setchecked("phone");
                        onChange({
                            type: "phone",
                            width: 1280,
                            height: 2778,
                            unit: "px"
                        });
                    }
                }} style={{ margin: "12px 0" }}>
                    <div style={{ width: 36 }} className='center'>
                        <IconFont type='icon-phone' style={{ fontSize: 36, color: "#fff", paddingRight: 2 }} />
                    </div>
                    <p>手机尺寸</p>
                    <span style={{ flex: 1, textAlign: "right" }}>1280*2778像素</span>
                </div>

                <div className={checked == "A4" ? styles.active : 'row'} onClick={() => {
                    if (checked == "A4") {
                        onChange({});
                        setchecked("");
                    } else {
                        setchecked("A4");
                        onChange({
                            type: "A4",
                            width: 210,
                            height: 297,
                            unit: "mm"
                        });
                    }
                }}>
                    <div style={{ width: 36 }} className='center'>
                        <IconFont type='icon-A4' style={{ fontSize: 32 }} />
                    </div>
                    <p>A4尺寸</p>
                    <span style={{ flex: 1, textAlign: "right" }}>210*297毫米</span>
                </div>
            </div>
            <Divider style={{ marginTop: 12, marginBottom: 12 }}></Divider>
            <p style={{ fontSize: 14, color: "#999", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ marginRight: 12 }}>
                    自定义尺寸
                </span>
            </p>

            <div className="row" style={{ justifyContent: "space-around" }}>
                <InputNumber
                    value={value.width ? parseInt(value.width) : 0}
                    onChange={(val) => {
                        onChange({
                            ...value,
                            type: "other",
                            width: val,
                        });
                    }}
                    style={{ flex: 1 }}
                >

                </InputNumber>
                <Tooltip title="宽高互换">
                    <RetweetOutlined style={{ fontSize: 18, color: "#000000", padding: "2px 16px" }} onClick={() => {
                        let width = value.width ? value.width : 0,
                            height = value.height ? value.height : 0;
                        onChange({
                            ...value,
                            height: width,
                            width: height,
                        });
                    }} />
                </Tooltip>
                <InputNumber
                    style={{ flex: 1 }}
                    value={value.height ? parseInt(value.height) : 0}
                    onChange={(val) => {
                        onChange({
                            ...value,
                            type: "other",
                            height: val,
                        });
                    }}
                ></InputNumber>
                <Select
                    style={{ marginLeft: 6, width: 88 }}
                    options={[
                        {
                            label: "像素",
                            value: "px"
                        },
                        {
                            label: "毫米",
                            value: "mm"
                        }
                    ]}
                    value={value.unit ?? "px"}
                    onChange={(val) => {
                        let width = value.width ? value.width : 0,
                            height = value.height ? value.height : 0;
                        if (val == "px") {
                            width = mmConversionPx(width);
                            height = mmConversionPx(height);
                        } else {
                            width = pxConversionMm(width);
                            height = pxConversionMm(height);
                        }
                        onChange({
                            ...val,
                            width,
                            height,
                            unit: val
                        })
                    }}
                ></Select>


            </div>



        </div>
    );
}

export default ChooseSize;